<template>
  <h3>组合api-watch</h3>
  <p>{{ count }}</p>
  <button @click="fn">btn</button>
</template>

<script>
// watch现在是一个函数，也是直接调用的
import { ref, watch } from "vue";
export default {
  setup() {
    const count = ref(5);
    const fn = () => {
      count.value++;
    };

    // watch可以多次调用

    // 可以传入三个参数
    // 1. 我们要监听的值
    // 2. 回调函数, val,oldVal
    // 3. 描述对象， deep、immediate
    watch(
      count,
      (val, oldVal) => {
        console.log("count改变了, 从" + oldVal + "变成了" + val);
      },
      {
        // 深度的监听，可以去监听对象和数组
        deep: true,
        // 进入页面的先做一次监听
        immediate: true,
      }
    );

    return {
      count,
      fn,
    };
  },
};
</script>
